import {
	VPage,
	onLoad,
	reactive,
	watchEffect,
	toRefs
} from 'v3-mini';
import {
	system,
	resetRatio
} from '../../utils/global'
import util from '../../utils/util';

VPage({
	setup(props, context) {

		let name = wx.getSystemInfoSync().model
		let brand_id = 0
		let type_id = 0
		let mobile_id = 0
		let data = reactive({
			brand: [],
			type: [],
			mobile: [],
			brand_index: "",
			type_index: "",
			mobile_index: "",
		})

		function brandChange(e) {
			data.brand_index = e.detail.value
			data.type_index = ""
			data.mobile_index = ""
			data.type = []
			data.mobile = []
		}

		function typeChange(e) {
			data.type_index = e.detail.value
			data.mobile_index = ""
			data.mobile = []
		}

		function mobileChange(e) {
			data.mobile_index = e.detail.value
		}
		watchEffect(() => {
			getType(data.brand_index)
		})
		watchEffect(() => {
			getMobile(data.type_index)
		})

		// 提交
		function submit() {
			let mobile_id = data.mobile[data.mobile_index] ? data.mobile[data.mobile_index].id : ''
			util.ajax({
				url: 'ruler/set',
				data: {
					name,
					mobile_id,
				},
				success(res) {
					system.width = res.width
					system.height = res.height
					system.diagonal = res.diagonal
					wx.setStorageSync('m-width', system.width)
					wx.setStorageSync('m-height', system.height)
					wx.setStorageSync('m-diagonal', system.diagonal)
					resetRatio()
					wx.navigateBack({
						delta: 1
					})
				},
				fail(res) {
					util.alert(res.data ? res.data.message : res.errMsg);
				}
			})
		}

		function error() {
			util.ajax({
				url: 'ruler/error',
				data: {
					name,
					mobile_id,
				},
				success() {
					util.alert('感谢反馈，我们会尽快完善该信息');
				}
			})
		}

		function init() {
			util.ajax({
				url: 'ruler/init',
				data: {
					name
				},
				success(res) {
					if (res) {
						brand_id = res.brand_id
						type_id = res.type_id
						mobile_id = res.mobile_id
					}
					getBrand()
				}
			})
		}

		function getBrand() {
			util.ajax({
				url: 'ruler/get-brand',
				success(res) {
					data.brand = res;
					res.forEach((item, index) => {
						if (item.id == brand_id) data.brand_index = String(index)
					});
				}
			})
		}

		function getType(index) {
			if (index === '' || data.brand.length === 0) return
			util.ajax({
				url: 'ruler/get-type',
				data: {
					id: data.brand[index].id
				},
				success(res) {
					data.type = res;
					res.forEach((item, index) => {
						if (item.id == type_id) data.type_index = String(index)
					});
				}
			})
		}

		function getMobile(index) {
			if (index === '' || data.brand.length === 0) return
			util.ajax({
				url: 'ruler/get-mobile',
				data: {
					id: data.type[index].id
				},
				success(res) {
					data.mobile = res;
					res.forEach((item, index) => {
						if (item.id == mobile_id) data.mobile_index = String(index)
					});
				}
			})
		}

		onLoad(init)

		return {
			name,
			width: system.width,
			height: system.height,
			diagonal: system.diagonal,

			...toRefs(data),

			brandChange,
			typeChange,
			mobileChange,
			submit,
			error
		}
	},
})